<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .content {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }

      .content__item {
        border-bottom: 1px solid orangered;
        height: 20vh;
        background-color: lightblue;
        transition: all 0.3s;
        line-height: 20vh;
        text-align: center;
      }

      .content__wrapper {
        position: relative;
      }
      .tips {
        position: absolute;
        text-align: center;
        width: 100vw;
        height: 20vw;
        left: 0;
        top: -40px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="content">
        <div class="content__wrapper">
          <div class="content__item">1</div>
          <div class="content__item">2</div>
          <div class="content__item">3</div>
          <div class="content__item">4</div>
          <div class="content__item">娱乐</div>
          <div class="content__item">汽车</div>
          <div class="content__item">游戏</div>
        </div>
      </div>
    </div>
    <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <script>
      var currentNum = 6;
      var contentWrap = document.querySelector(".content__wrapper");
      var tip = document.createElement("p");
      tip.classList.add("tips");
      tip.innerText = "释放更新";

      var refreshTip = document.createElement("p");
      refreshTip.classList.add("tips");
      refreshTip.innerText = "更新中......";

      function refresh() {
        var contentItems = document.querySelectorAll(".content__item");
        console.log(contentItems);
        for (var i = 0; i < contentItems.length; i++) {
          contentItems[i].innerText = dayjs().format("YYYY-MM-DD HH:mm:ss");
        }
      }

      refresh();

      var bs = BetterScroll.createBScroll(".content", {
        pullDownRefresh: true,
      });

      // 有一个节流阀效果  事件触发之后 手动把节流阀重新开启
      bs.on("pullingDown", function () {
        console.log("下拉开始了！");
        // 把‘释放更新’的提示移除掉
        contentWrap.removeChild(tip);

        // 显示‘更新中’的提示
        contentWrap.appendChild(refreshTip);

        setTimeout(function () {
          // 把更新中的提示也移除掉
          contentWrap.removeChild(refreshTip);
          refresh();

          // 开启节流阀的
          bs.finishPullDown();
        }, 2000);
      });

      // 下拉的范围超过了阈值 就会触发该事件
      bs.on("enterThreshold", function () {
        console.log("进入了threshhold");
        // 加上‘释放更新’的提示
        contentWrap.appendChild(tip);
      });
    </script>
  </body>
</html>
